.deriver-content {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;

  .develop-type {
    display: flex;
    align-items: center;
    padding: 0 18px;
    position: relative;

    &::before {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      display: block;
      clear: both;
      height: 0.0625rem;
      background-color: #E8EBF2;
      content: '';
    }

    .label {
      font-size: 14px;
      color: #9B9FAB;
      font-weight: 400;
      margin-right: 16px;
    }

    :deep(.arco-tabs-content) {
      display: none;
    }

    :deep(.arco-tabs-nav-type-line .arco-tabs-tab) {
      padding: 9px 0;
    }

    :deep(.arco-tabs-nav::before) {
      display: none;
    }

  }

  .condision {
    padding: 0 0 48px 18px;
    overflow-y: auto;

    .item-li {
      display: flex;
      align-items: center;
      height: 60px;
      position: relative;
      padding-right: 18px;

      .title {
        font-size: 14px;
        color: #33353B;
        font-weight: 600;
        width: 76px;
        display: inline-block;
        height: 36px;
        line-height: 36px;
      }

      .label {
        font-size: 14px;
        color: #60646f;
        font-weight: 400;
        width: 76px;
        display: inline-block;
        height: 36px;
        line-height: 36px;
      }

      .index-name {
        background: #F6F8FC;
        border-radius: 3px;
        height: 36px;
        line-height: 36px;
        padding: 0 12px;
      }

      .index-time {
        height: 36px;
        line-height: 36px;
        width: 42px;
        text-align: center;
        border: 1px solid #D4D7E1;
        border-radius: 3px;
      }

      .add-btn {
        width: 18px;
        height: 18px;
        line-height: 16px;
        text-align: center;
      }
    }

    .model {
      &::before {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        display: block;
        clear: both;
        height: 0.0625rem;
        background-color: #E8EBF2;
        content: '';
      }
    }

    .time {
      align-items: flex-start;
      margin-top: 24px;
      height: auto;
    }

    .business {
      height: auto;
      margin-bottom: 24px;
      margin-top: 12px;
      align-items: flex-start;
    }

    .dimension {
      .title {
        margin-right: 3px;
      }

      :deep(.arco-select) {
        .arco-tag {
          background-color: #EFF1F7;
        }
      }
    }

    :deep(.data-model-select) {

      background-color: #F6F8FC;
      border-radius: 3px;
      border: none;

      .arco-select-view-value {
        .extra-tips {
          font-size: 12px;
          color: #60646F;
          padding-left: 6px;
        }
      }

      .arco-select-view-suffix {
        .arco-select-view-icon {
          color: #60646F;
        }
      }

      &.arco-select-view-disabled {
        .arco-select-view-value {
          >span:first-child {
            color: #33353b;
          }
        }
      }
    }

  }

  .initTable {
    position: absolute;
    right: 0;
    bottom: 0;
    max-height: calc(100vh - 60px);
    min-height: 36px;
    background-color: #ffffff;
  }

  .table-result {
    width: 100%;
    height: 100%;

    .table-result-data {
      background: #F6F8FC;
      padding: 20px 18px;
      height: 100%;
    }

    &-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #FFFFFF;
      box-shadow: 0 -1px 0 0 #E8EBF2, inset 0 -1px 0 0 #E8EBF2;
      padding-right: 20px;

      .tabs-name {
        margin: 0 12px;
        line-height: 1.5715;
        color: rgb(22, 93, 255);
        font-weight: 500;

        >span {
          position: relative;
          display: inline-block;
          border-bottom: 2px solid rgb(22, 93, 255);
          padding: 6px 6px;

          ::before {
            background-color: transparent;
            position: absolute;
            top: 0;
            right: -8px;
            bottom: 0;
            left: -8px;
            z-index: -1;
            border-radius: var(--border-radius-small);
            opacity: 1;
            transition: all .2s cubic-bezier(0, 0, 1, 1);
            content: "";
          }
        }
      }
    }
  }

  .resizebox-demo {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: var(--color-bg-2);
  }

  .resizebox-demo-line {
    flex: 1;
    background-color: #e8ebf2;
  }

  .resizebox-demo-horizontal .resizebox-demo-line {
    height: 1px;
  }
}

.alert-tips {
  padding: 10px;
  color: #FF712D;
  display: flex;

  .arco-icon {
    margin-top: 2px;
  }

  >svg path {
    fill: #FF712D;
  }

  .text {
    display: flex;
    flex-direction: column;
  }
}